<template>
  <div class="wrap">
    <img src="../assets/bg_img1.jpg">
    <div class="main" id="main">
      <h2>宿舍管理系统</h2>

      <div class="input">
        <i class="el-icon-s-custom"></i>
        <el-input v-model="loginData.userNm" placeholder="请输入账号："></el-input>
      </div>
      <div class="input">
        <i class="iconfont icon-mima"></i>
        <el-input placeholder="请输入密码" v-model="loginData.passwd" show-password></el-input>
      </div>
      <div class="btn">

        <el-radio-group v-model="loginData.powId">
          <el-radio label="1" border>学生</el-radio>
          <el-radio label="2" border>管理员</el-radio>
        </el-radio-group>
      </div>

      <div class="sub">
        <el-button @click="login()" type="primary" round>登录</el-button>
        <div class="check">
          <!-- <img :src="imgUrl+'http://81.68.133.117:8080/checkCode?'+Math.random()"> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Cookies from 'js-cookie';
export default {
  created () {
    // console.log(sessionStorage.getItem("token"));
  },
  data () {
    return {
      input: '',
      // token: localStorage.getItem('token'),
      // 登录数据
      userToken: '',
      loginData: {
        userNm: '',
        passwd: '',
        powId: '',
        username: ''
      }
    }
  },
  methods: {

    // 登录接口
    login () {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      // sessionStorage.setItem('username', this.loginData.username)
      // console.log(sessionStorage.getItem('username'))
      localStorage.setItem('token', null)
      var params = new URLSearchParams()
      params.append('userNm', this.loginData.userNm)
      params.append('passwd', this.loginData.passwd)
      params.append('powId', this.loginData.powId)
      this.$axios.post('/login', params).then(res => {
        if (res.data.code == 200) {

          sessionStorage.setItem('username', res.data.data.data.username)
          localStorage.setItem('token', res.data.data.data.token)
          this.$message.success('登录成功')
          loading.close();
          this.$router.push({ path: '/home/shownotice' })

          // this.$store.dispatch("changeLogin");
          console.log(sessionStorage.getItem('username'))

          console.log(res);

        } else if (res.data.code == 400) {
          loading.close();
          this.$message.error('用户名或密码错误！')
        } else if (res.data.code == 401) {
          loading.close();
          this.$message.error('请输入用户名或密码并选择登录类型')
        } else {
          loading.close();
          console.log(res)
          this.$message.error('请选择登录类型！')
        }
      })
    },


    // 验证码
    checkLogin () {

      this.$axios.get('/checkCode', {
        ResponseType: 'blob'
      }).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          this.$message.success('查询成功')
        }
      })
    },
  },
  computed: {

  },
  mounted () {
    // this.getUser();
  },
  // test () {
  //   console.log(this.loginData.powId)
  // }
}
</script>
<style scoped>
.wrap {
  position: relative;
  height: 100%;
  widows: 100%;
}
.wrap img {
  height: 100%;
  width: 100%;
  filter: blur(2px);
}
.wrap .main {
  box-sizing: border-box;
  margin: auto auto !important;
  padding-left: 40px !important;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 450px;
  height: 380px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
}
#main h2 {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  margin-left: -30px !important;
  text-align: center;
  color: #409eff;
}
.input {
  padding-left: 20px !important;
  padding-top: 20px !important;
  width: 80%;
}
.input i {
  font-size: 20px;
  padding-bottom: 5px !important;
}
.btn {
  margin: 0 auto !important;
  width: 300px;
}
.btn .el-radio {
  margin-left: 10px !important;
  height: 40px;
  width: 100px;
  text-align: center;
  line-height: 40px;
}
.btn .el-radio:nth-child(2) {
  margin-top: 20px !important;
  margin-left: 50px !important;
}
.sub {
  text-align: center;
  margin-top: 30px !important;
}
.sub button {
  float: left;
  margin-left: -30px !important;
  width: 160px;
  height: 50px;
  text-align: center;
  line-height: 50px;
}
::v-deep .input .el-input .el-input__inner {
  padding-left: 10px !important;
}
.check {
  float: right;
  width: 200px;
  height: 60px;
  background: lightblue;
  z-index: 9999;
}
</style>